<template>
  <!--底部弹框-->
  <view :class="{'pickerMask':showModal}" @touchmove.stop.prevent="returnHandle">
    <view class="r-dtpicker mask-container" :class="{'r-dtpicker-show':showModal}">
      <slot class="mask-header" name="modal-header">
        mask-header
      </slot>
      <slot class="mask-body" name="modal-body">
        mask-body
      </slot>
      <slot class="mask-footer" name="modal-footer">
        mask-footer
      </slot>
    </view>
  </view>
</template>

<script>
  export default {
    name: "CenterShowModal",
    props: {
      showModal: {
        required: true,
        default: false
      },
    },
    data() {
      return {
        // showModalTest:false,
      };
    },
    methods: {
      returnHandle() {
        this.showModal = false
      },
    }
  }
</script>

<style lang="scss" scoped>
  .mask-container {
    background-color: #fff;
    height: 400px;
    padding-bottom: env(safe-area-inset-bottom);
  }
  /*底部弹框*/
  .pickerMask {
    position: fixed;
    z-index: 10000;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.2);
  }
  .r-dtpicker {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    transition: all 0.3s ease;
    transform: translateY(100%);
    z-index: 10000;
  }
  .r-dtpicker-show {
    transform: translateY(0);
  }
</style>
